<template>
	<view class="">
		<!-- 轮播图 -->
		<view class="swiper">
			<swiper circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" indicator-active-color="#fff" indicator-color="rgba(255, 255, 255, 0.5)"
				@change="onSwiperChange">
				<swiper-item v-for="item,index in info.images">
					<!--  mode="widthFix" -->
					<image style="width: 100%;height: 598rpx;" :src="item"></image>
				</swiper-item>
			</swiper>
			<view class="indicator-container" v-if="info.images.length>1">
				<view :class="['indicator-dot', { active: currentIndex === index }]"
					v-for="(item, index) in info.images" :key="index"></view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="detail_con">
			<view class="detail_title">{{info.title}}</view>
			<view class="detail_price">￥{{info.price}} <span style="font-size: 24rpx;">/月</span> <span
					style="font-size: 24rpx;margin-left: 12rpx;">({{info.pay_type}})</span> </view>
			<view class="detail_tip">
				<view class="" v-for="item,index in info.tags">{{item}}</view>
				<!-- 			<view class="">地铁</view>
				<view class="">地铁</view>
				<view class="">地铁</view> -->
			</view>
			<!-- line -->
			<view class="" style="width: 100%;height: 20rpx;background: #F2F4F5;"></view>
			<!--  -->
			<view class="detail_list">
				<view class="detail_item">
					<view class="detail_item_top">{{info.type==1?'整租':'合租'}}</view>
					<view class="detail_item_bom">类型</view>
				</view>
				<view class="detail_item">
					<view class="detail_item_top">{{info.house}}</view>
					<view class="detail_item_bom">出租户型</view>
				</view>
				<view class="detail_item">
					<view class="detail_item_top">{{info.area}}㎡</view>
					<view class="detail_item_bom">面积</view>
				</view>
				<view class="detail_item">
					<view class="detail_item_top">{{info.city.area}}</view>
					<view class="detail_item_bom">区域</view>
				</view>
				<view class="detail_item">
					<view class="detail_item_top">{{info.floor}}</view>
					<view class="detail_item_bom">楼层</view>
				</view>
				<view class="detail_item">
					<view class="detail_item_top">{{info.elevator==1?'有电梯':'无电梯'}}</view>
					<view class="detail_item_bom">电梯</view>
				</view>
				<view class="detail_item">
					<view class="detail_item_top">{{info.pay_type}}</view>
					<view class="detail_item_bom">付款方式</view>
				</view>
				<view class="detail_item">
					<view class="detail_item_top">{{info.enter_type==1?'随时入住':'预约入住'}}</view>
					<view class="detail_item_bom">入住时间</view>
				</view>
			</view>
			<!-- line -->
			<view class="" style="width: 100%;height: 20rpx;background: #F2F4F5;"></view>
			<!-- list -->
			<view class="type" v-for="item,index in info.info">
				<view class="type_title">{{index}}</view>
				<view class="type_list">
					<view class="type_item" v-for="items,indexs in item">
						<image src="../../static/icon_dui.png" mode="widthFix"></image>{{items}}
					</view>
				</view>
			</view>
			<!-- line -->
			<!-- <view class="" style="width: 100%;height: 20rpx;background: #F2F4F5;"></view> -->
			<!-- list -->
			<!-- 	<view class="type">
				<view class="type_title">家电</view>
				<view class="type_list">
					<view class="type_item" v-for="item,index in 7">
						<image src="../../static/icon_dui.png" mode="widthFix"></image>微波炉
					</view>
				</view>
			</view> -->
			<!-- line -->
			<!-- <view class="" style="width: 100%;height: 20rpx;background: #F2F4F5;"></view> -->
			<!-- list -->
			<!-- 	<view class="type">
				<view class="type_title">其他</view>
				<view class="type_list">
					<view class="type_item" v-for="item,index in 6">
						<image src="../../static/icon_dui.png" mode="widthFix"></image>微波炉
					</view>
				</view>
			</view> -->
		</view>
		<view class="button">
			<!-- <view class="button_kf">客服</view> -->
			<view class="button_fd" @click="handleFd">联系房东</view>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	export default {
		data() {
			return {
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				currentIndex: 0,
				info: {}
			}
		},
		async onLoad(option) {
			// console.log(option);
			try {
				const response = await request('/v1/rent', 'GET', {
						id: option.id
					},
					'info'); // 只需要传递相对路径
				this.info = response.body

			} catch (error) {
				console.error('请求失败:', error);
			}
		},
		methods: {
			onSwiperChange(index) {
				// console.log(index);
				this.currentIndex = index.detail.current
			},
			handleFd() {
				uni.makePhoneCall({
					phoneNumber: this.info.phone,
					success: () => {
						// console.log('拨打电话成功');
					},
					fail: (err) => {
						// console.error('拨打电话失败', err);
					}
				});
			}
		}
	}
</script>

<style>
	.swiper {
		position: relative;
	}

	.indicator-container {
		position: absolute;
		bottom: 70rpx;
		/* 调整为你想要的位置 */
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;
	}

	.indicator-dot {
		width: 12rpx;
		/* 圆点宽度 */
		height: 12rpx;
		/* 圆点高度 */
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.5);
		/* 默认颜色 */
		margin: 0 5px;
		/* 圆点间距 */
	}

	.indicator-dot.active {
		background-color: #fff;
		/* 激活状态颜色 */
	}

	.a-swiper-dots {
		bottom: 300rpx !important;
	}

	.swiper>>>.a-swiper-dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 12rpx;
	}

	.detail_con {
		/* height: 300rpx; */
		position: relative;
		background: #fff;
		margin-top: -20px;
		z-index: 99;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.detail_title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
		text-align: center;
		padding: 0 32rpx;
		padding-top: 32rpx;

	}

	.detail_price {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #FF6200;
		margin-top: 36rpx;
		padding-left: 32rpx;
	}

	.detail_tip {
		display: flex;
		flex-wrap: wrap;
		margin-top: 34rpx;
		padding-left: 32rpx;
		padding-bottom: 40rpx;
	}

	.detail_tip>view {
		background: #FFF3EB;
		border-radius: 8rpx;
		border: 2rpx solid #FF6200;
		padding: 6rpx 16rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF6200;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
	}

	.detail_tip view:last-child {
		background: #EDFFE5;
		border-radius: 8rpx;
		border: 2rpx solid #31A653;
		color: #31A653;
	}

	.detail_list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-top: 30rpx;
	}

	.detail_item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.detail_item_top {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}

	.detail_item_bom {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		margin-top: 12rpx;
	}

	/*  */
	.type {
		padding: 28rpx 32rpx;
		display: flex;
		/* align-items: center; */
		position: relative;
	}

	.type::after {
		content: '';
		width: 100%;
		height: 20rpx;
		background: #F2F4F5;
		position: absolute;
		left: 0;
		bottom: 0;

	}

	.type_title {
		width: 20%;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
	}

	.type_list {
		width: calc(100% - 20%);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding-top: 5rpx;
		/* margin-left: 64rpx; */
	}

	.type_item {
		width: 33%;
		display: flex;
		margin-bottom: 20rpx;
		align-items: center;
		flex-wrap: wrap;
		/* margin-right: 60rpx; */
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
	}

	.type_item image {
		width: 32rpx;
		margin-right: 6rpx;
	}

	.button {
		margin-top: 80rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 24rpx;
		padding-bottom: 50rpx;
	}

	.button_kf {
		width: 252rpx;
		height: 88rpx;
		border-radius: 16rpx;
		border: 2rpx solid #FF7623;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FF7623;
		line-height: 88rpx;
		text-align: center;
	}

	.button_fd {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(314deg, #FF6F55 0%, #FF8841 100%);
		border-radius: 16rpx;
		text-align: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
	}
</style>